<template>
    <div class="BarChart-container">
        <V3Echarts :options="option" :width="props.width" :height="props.height" />
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import V3Echarts from '@/stories/components/V3Echarts/index.vue'

const props = defineProps({
    util: {
        type: String,
        default: '千人'
    },
    width: {
        type: Number,
        default: 600
    },
    height: {
        type: Number,
        default: 350
    },
    xAxis: {
        type: Array,
        default: () => ['0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点']
    },
    optionData: {
        type: Object,
        default: () => {
            return {
                '6号楼': [2.6, 1.9, 1.0, 4.4, 8.7, 0.7, 5.6, 6.2, 3.7, 8.8, 6.0, 2.3],
                '7号楼': [2.0, 6.9, 1.0, 4.2, 5.6, 0.7, 2.6, 4.2, 2.6, 1.0, 6.4, 3.3],
                '8号楼': [3.0, 6.9, 2.0, 5.2, 5.6, 1.7, 2.6, 4.2, 2.6, 5.0, 6.7, 9.3]
            }
        }
    },
    color: {
        type: Array,
        default: () => ['#2190aa', '#4b71ef', '#94e5f9', '#81a5ff', '#00f1ff', '#ffee9f', '#ffffff']
    },
    dataZoom: {
        type: Boolean,
        default: false
    }
})

let DataName: any = ''

let series: any = []
const option = ref()
const setOptions = () => {
    const val = JSON.parse(JSON.stringify(props.optionData))
    DataName = Object.keys(val)
    series = []
    for (const key in val) {
        const index = DataName.indexOf(key)
        series.push({
            name: key,
            type: 'line',
            data: val[key],
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            showSymbol: true,
            itemStyle: {
                normal: {
                    lineStyle: {
                        width: 2
                    },
                    color: props.color?.[index] //线条样式
                }
            },
            avoidLabelOverlap: true,
            zlevel: 5,
            label: {
                normal: {
                    show: false,
                    position: 'center',
                    formatter: '{value|{c}}',
                    rich: {
                        //中间文字
                        value: {
                            color: '#fff',
                            fontFamily: 'PangMenZhengDao',
                            fontSize: 14,
                            fontWeight: '400'
                        }
                    }
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: 10
                    }
                }
            }
        })
    }
    option.value = {
        color: ['#fec520', '#00eaf7', '#3799f8'],
        dataZoom: props.dataZoom
            ? [
                  {
                      show: props.dataZoom,
                      start: 0,
                      end: 30,
                      height: 10,
                      bottom: '10%'
                  }
              ]
            : [],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                label: {
                    show: false
                },
                lineStyle: {
                    width: 1
                }
            },
            formatter: function () {
                return ''
            },
            textStyle: {
                color: '#556677'
            }
        },
        legend: {
            align: 'left',
            left: '0%',
            top: '0%',
            data: DataName,
            icon: 'pin',
            itemGap: 5,
            itemWidth: 10,
            itemHeight: 5,
            textStyle: {
                color: '#fff',
                fontSize: 10
            },
            pageIconColor: 'white', //激活的分页按钮颜色
            pageIconInactiveColor: '#2f4554', //没激活的分页按钮颜色
            tooltip: {
                show: true
            },
            //设置自定义legend 的重点
            formatter: function (name: any) {
                if (DataName.length > 4) {
                    const than = DataName //获取series中的data
                    let tarValue = ''
                    for (let i = 0, l = than.length; i < l; i++) {
                        if (than[i] == name) {
                            tarValue = than[i]
                        }
                    }
                    let str = ''
                    const len = name.length
                    let mid = 3 - len
                    if (len > 3) {
                        name = name.slice(0, 3) + '...'
                    } else {
                        mid = 10 - len
                        while (mid) {
                            str += '\xa0\xa0\xa0'
                            mid--
                        }
                        name = name + str
                    }
                }

                return `${name}`
            }
        },
        grid: {
            top: '28%',
            left: '0%',
            right: '0%',
            bottom: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: ['40%', '20%'],
            data: props.xAxis,
            axisLabel: {
                show: true,
                interval: 0,
                textStyle: {
                    fontSize: 10
                }
            },
            // 坐标轴线
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.8)', //X轴字体颜色
                    width: 1
                }
            }
        },
        yAxis: {
            type: 'value',
            name: props.util,
            min: 0,
            nameTextStyle: {
                fontSize: 10
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    fontSize: 10
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.8)',
                    width: 1
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(200,200,200,1)' //里面横着的虚线
                }
            }
        },
        series: series
    }
}

watch(
    () => props,
    newVal => {
        setOptions()
    },
    {
        immediate: true,
        deep: true
    }
)
</script>

<style scoped lang="scss">
.LineBarChart-container {
    height: 300px;
    position: relative;
}
</style>
